<template>
  <div class="main">
    <div class="distance">
      <h3>距离</h3>
      <div class="list">
        <div
          @click="distanceSelect(index)"
          class="item"
          :class="{ active: selectData.distance_active === index }"
          v-for="(item, index) in selectData.distance"
          :key="index"
        >
          {{ item }}
        </div>
        <!-- <div class="item">由近及远</div> -->
      </div>
    </div>
    <div class="grade">
      <h3>评分</h3>
      <div class="list" style="height:140px">
        <div
          class="item"
          v-for="(item, index) in selectData.grade"
          :key="index"
          @click="gradeSelect(index)"
          :class="{ active: selectData.grade_range === index }"
        >
          {{ item }}
        </div>
        <!-- <div class="item">4分-5分</div>
        <div class="item">3分-3.9分</div>
        <div class="item">2分-2.9分</div>
        <div class="item">1分-1.9分</div>
        <div class="item">一分以下</div> -->
      </div>
    </div>
    <div class="btn">
      <van-button class="reset" @click="reset">清除</van-button>
      <van-button class="submit" type="danger" @click="submit">确定</van-button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
// 导入筛选区域
export default {
  name: 'SelectPopup',
  props: {
    selectData: {
      type: Object
    }
  },
  data () {
    return {
      // distance: {
      //   desc: '由远及近',
      //   asc: '由近及远'
      // },
      // grade: {
      //   five: '4分-5分',
      //   four: '3分-3.9分',
      //   three: '2分-2.9分',
      //   two: '1分-1.9分',
      //   one: '一分以下'
      // },
      // distance_active: '',
      // grade_range: ''
    }
  },
  computed: {
    ...mapState('company', ['form'])
  },
  methods: {
    ...mapMutations('company', [
      'setStart',
      'setDistance',
      'setScoreRange',
      'initForm',
      'changeReset'
    ]),
    // 提交数据，调用接口
    submit () {
      // 判断是否有选择

      if (!this.selectData.distance_active && !this.selectData.grade_range) {
        this.$toast.fail('请选择')
        return
      }
      // 初始化数据
      this.initForm()
      // 清空列表
      this.changeReset(true)
      this.setDistance(this.selectData.distance_active)
      this.setScoreRange(this.selectData.grade_range)
      this.$bus.$emit('getCompanyData', { isScrollTop: true, isFinish: false })
      this.$emit('closePop')
      this.reset()
    },
    distanceSelect (index) {
      this.selectData.distance_active = index
    },
    gradeSelect (index) {
      // console.log('index: ', index)
      this.selectData.grade_range = index
    },
    // 清除
    reset () {
      this.selectData.distance_active = ''
      this.selectData.grade_range = ''
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  h3 {
    margin: 63.48px 0 36px;

    // width: 73px;
    height: 50px;
    font-family: PingFangSC-Medium;
    font-size: 36px;
    color: #222222;
    letter-spacing: 0.41px;
    // font-weight: 500;
  }
  .list {
    display: flex;
    justify-content: space-between;
    // align-items: center;
    align-content: space-between;
    flex-wrap: wrap;

    .item {
      text-align: center;
      line-height: 64px;
      width: 334px;
      height: 64px;
      background: #f9f8f8;
      border-radius: 8px;
      font-family: PingFangSC-Regular;
      font-size: 24px;
      color: #181a39;
      letter-spacing: 0.28px;
      font-weight: 400;
      &.active {
        width: 334px;
        height: 64px;
        background: #ffe2e9;
        border: 1px solid #e40137;
        border-radius: 8px;
      }
    }
  }
  .distance {
  }
  .btn {
    margin: 68.48px 0 33.6px;
    display: flex;
    justify-content: space-between;
    .reset {
      width: 250px;
      height: 100px;
      background: #ffe2e9;
      border-radius: 14px;
    }
    .submit {
      width: 420px;
      height: 100px;
      background: #e40137;
      border-radius: 14px;
    }
  }
}
</style>
